@import 'variable';

.mmm_header{
  height: 100rem/@base;
  width: 100%;
  padding:21rem/@base 13rem/@base 0 31rem/@base;
  background-color: #FF841D;
  // position: absolute;
  // top:0;
  // left:0;
  .logo{
    float: left;
    img{
      display: block;
      width: 378rem/@base;
      height: 54rem/@base;
    }
  }
  .app{
    float:right;
    img{
      width: 74rem/@base;
      height: 73rem/@base;
    }
  }
}

.mmm_search{
  height: 100rem/@base;
  padding: 20rem/@base;
  background-color: #fff;
  input{
    width: 570rem/@base;
    height: 60rem/@base;
    border-radius:30rem/@base;
    background-color: #F1F1F1;
    padding-left:26rem/@base;
    color: #333;
    font-size:22rem/@base;
    float:left;
    margin-right:10rem/@base;
  }
    button{
      width: 126rem/@base;
      height: 60rem/@base;
      border-radius: 30rem/@base;
      border:none;
      background-color: #FF841D;
      color: #fff;
      font-size: 28rem/@base;
      float:right;
    }
}

.mmm_nav{
  height: 72rem/@base;
  line-height: 70rem/@base;
  background-image:linear-gradient(to bottom,#fff,#ececec);
  font-size:26rem/@base;
  padding-left:16rem/@base;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
}


.mmm_brand{
  .title{
    height: 72rem/@base;
    line-height: 70rem/@base;
    font-size:26rem/@base;
    padding-left:15rem/@base;
    color: #7A1E2D;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
  }
  ul{
    background-color: #fff;
    li{
      a{
        display:block;
        height: 130rem/@base;
        padding:20rem/@base 10rem/@base 0 20rem/@base;
        border-bottom:1px solid #ccc;
        .num{
          width: 40rem/@base;
          height: 40rem/@base;
          line-height: 40rem/@base;
          background-color: #C9C9C9;
          float:left;
          margin-right:20rem/@base;
          font-size:24rem/@base;
          color:#fff;
          text-align: center;
        }
        .top1{
          background-color: red;
        }
        .top2{
          background-color: orange;
        }
        .top3{
          background-color: #8ADF5B;
        }
        .right{
          overflow: hidden;
          position: relative;
          p{
            font-size:30rem/@base;
            height: 53rem/@base;
          }
          .info{
            font-size:24rem/@base;
            color:#C9C9C9;
          }
          span{
            font-size:32rem/@base;
            color: #9A9F9F;
            position: absolute;
            top:30rem/@base;
            right:0;
          }
        }
      }
    }
  }
}

.mmm_sale{
  .title{
    height: 72rem/@base;
    line-height: 70rem/@base;
    font-size:26rem/@base;
    padding-left:15rem/@base;
    color: #7A1E2D;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
  }
  ul{
    background-color: #fff;
    li{
      a{
        display: block;
        height: 233rem/@base;
        padding:25rem/@base 21rem/@base 0 26rem/@base;
        border-bottom:1px solid #ccc;
        img{
          width: 190rem/@base;
          float: left;
          margin-right:20rem/@base;
        }
        .right{
          overflow: hidden;
          p{
            font-size:30rem/@base;
            line-height:50rem/@base;
          }
          .price{
            font-size:32rem/@base;
            color: #FF841D;
          }
          .info{
            margin-top:20rem/@base;
            font-size:24rem/@base;
            color: #A19BA9;
            .offer{
              float:left;
              margin-right:20rem/@base;
            }
          }
        }
      }
    }
  }
}

.mmm_coms{
  .title{
    height: 72rem/@base;
    line-height: 70rem/@base;
    font-size:26rem/@base;
    padding-left:15rem/@base;
    color: #7A1E2D;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
  }
  .item{
    background-color: #fff;
    padding-bottom:25rem/@base;
    ul{
      background-color: #fff;
      li{
        a{
          display: block;
          height: 233rem/@base;
          padding:25rem/@base 21rem/@base 0 26rem/@base;
          img{
            width: 190rem/@base;
            float: left;
            margin-right:20rem/@base;
          }
          .right{
            overflow: hidden;
            p{
              font-size:26rem/@base;
              line-height:50rem/@base;
              color: #837F88;
            }
          }
        }
      }
    }
    .com{
      margin:0  22rem/@base;
      padding:28rem/@base 10rem/@base 20rem/@base;
      border:1px solid #ccc; 
      background-color: #F8F8F8; 
      position: relative;  
      .info{
        font-size:24rem/@base;
        height: 57rem/@base;
        .name{
          float:left;
        }
        .time{
          float:right;
        }
      }
      .content{
        font-size:30rem/@base;
        line-height:44rem/@base;
      }
      .from{
        font-size:24rem/@base; 
      }
    }
    .triangle{
      width: 24rem/@base;
      height: 24rem/@base;
      border-top:1px solid #ccc;
      border-left:1px solid #ccc;
      background-color: red;
      position: absolute;
      top:-14rem/@base;
      left:80rem/@base;
      transform:rotate(45deg);
      background-color: #F8F8F8;
    }
  }
}